<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>StoreAdmin | CategoryList</title>
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../plugins/bootstrap-table/bootstrap-table.min.css">
	<link rel="stylesheet" href="../plugins/jquery-treegrid/css/jquery.treegrid.css">
	<link rel="stylesheet" href="../lte/css/AdminLTE.min.css">

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body class="hold-transition bg-gray">

<div class="content">

	<div class="box box-primary">
		<div class="box-header with-border">商品分类</div>
		<!-- /.box-header -->
		<div class="box-body">

			<!-- 工具栏 -->
			<div id="toolbar">
				<a class="btn btn-default" href="category-form.html"><i class="fa fa-plus"></i> 添加</a>
			</div>

			<!-- 表格数据 -->
			<table id="table"></table>

		</div>
		<!-- /.box-body -->
	</div>
	<!-- /.box -->

</div>

<!-- REQUIRED JS SCRIPTS -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="../lte/js/adminlte.min.js"></script>
<!-- Bootstrap Table -->
<script src="../plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="../plugins/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
<script src="../plugins/jquery-treegrid/js/jquery.treegrid.min.js"></script>
<script>
	$(function () {

		$("#table").bootstrapTable({
			url: "category-list.json",
			toolbar: "#toolbar",
			showRefresh: true,
			idField: "id",
			columns: [
				{field: "ck", checkbox: true},
				{field: "name", title: "名称"},
				{field: "status", title: "状态", formatter: statusFormatter},
				{field: "sortOrder", title: "排序"},
				{field: "isParent", title: "是否父分类", formatter: isParentFormatter},
				{field: "operate", title: "操作", width: "120px", formatter: operateFormatter}
			],
			treeShowField: "name",
			parentIdField: "parentId",
			onLoadSuccess: function (data) {
				console.log('load');
				// jquery.treegrid.js
				$("#table").treegrid({
					initialState: 'collapsed',
					treeColumn: 1,
					// expanderExpandedClass: 'glyphicon glyphicon-minus',
					// expanderCollapsedClass: 'glyphicon glyphicon-plus',
					onChange: function () {
						$("#table").bootstrapTable('resetWidth');
					}
				});
			}
		});

		function statusFormatter(value) {
			if (value === 1) {
				return '<span class="label label-info">正常</span>';
			} else {
				return '<span class="label label-default">删除</span>';
			}
		}

		function isParentFormatter(value) {
			return value === 1 ? "是" : "否";
		}

		function operateFormatter() {
			return [
				'<button class="btn btn-primary btn-xs" title="查看"><i class="fa fa-search-plus"></i></button> ',
				'<button class="btn btn-success btn-xs" title="修改"><i class="fa fa-pencil"></i></button> ',
				'<button class="btn btn-danger btn-xs" title="删除"><i class="fa fa-trash"></i></button>'
			].join('');
		}

	});
</script>

</body>
</html>